<template>
	<!-- 选择城市页 暂废-->
	<view class="city_list">
		<!-- 搜索框 S -->
		<view class="seach_wraper"><my-search placeholder="搜索出发城市如广州" :value="keyword" :border="true" maxlength="30" @change="onInput"></my-search></view>
		<!-- 搜索框 E -->
		<!-- 当前城市 S -->
		<view class="city_location">
			<view class="title">当前城市</view>
			<view class="name" @click="getCityLocation">
				<image class="img" src="../../static/images/icon_dw.png"></image>
				{{ locationCity.name }}
			</view>
		</view>
		<!-- 当前城市 E -->
		<!-- 热门城市/常用城市 S -->
		<view class="often">
			<view class="title">热门城市</view>
			<view class="often_list">
				<view class="often_item" v-for="(item, index) in oftenCityList" :key="index" @click="selectCity(item)">{{ item.name }}</view>
			</view>
		</view>
		<!-- 热门城市 E -->
		<!-- 城市列表 S -->
		<view class="list">
			<view class="list_item" v-for="(item, index) in cityList" :key="index" v-show="filter(item)" @click="selectCity(item)">
				<text class="name">{{ item.name }}</text>
				<text class="province">{{ item.province }}</text>
			</view>
		</view>
		<!-- 城市列表 N -->
	</view>
</template>

<script>
// components
import uniSearchBar from '@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue';
import mySearch from '@/components/mySearch/mySearch.vue';
// api
import { $departcities } from '../../service/index';
// utils
import { myShowToast,myShowModal } from '../../utils/utils.js';
export default {
	components: { mySearch },
	data() {
		return {
			keyword: '', // 输入框内容
			locationCity: {
				name: '定位中...'
			},
			oftenCityList: [
				{
					id: 0,
					name: '广州'
				},
				{
					id: 1,
					name: '深圳'
				},
				{
					id: 2,
					name: '上海'
				},
				{
					id: 4,
					name: '武汉'
				},
				{
					id: 5,
					name: '北京'
				},
				{
					id: 6,
					name: '南京'
				}
			], // 常用城市列表
			cityList: [
				{
					id: 0,
					name: '长春市',
					province:"吉林省"
				}
			] // 城市列表
		};
	},
	methods: {
		// 输入检索值
		onInput(e) {
			this.keyword = e;
		},
		// 获取当前定位
		getCityLocation() {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.locationCity.name = '广州';
				},
				fail: err => {
					console.log('当前位置失败：' + JSON.stringify(err));
				}
			});
		},
		// 输入检索
		filter(item) {
			const filter = item.name.indexOf(this.keyword) != -1 || item.province.indexOf(this.keyword) != -1;
			return filter;
		},
		// 选择城市
		selectCity(item) {
			uni.navigateTo({
				url: `../stationsDepart/stationsDepart?start=${item.name}`
			});
		},
		getDepartcities(){
			$departcities().then(res=>{
				const data = res.data;
				if(!data.success){
					myShowModal(data.message || '网络错误');
					return;
				}
				this.cityList = data.content || [];
			}).catch(err=>{
				console.log(err);
			});
		}
	},
	onLoad(options) {
		this.getCityLocation(); // 获取定位
		this.getDepartcities(); // 获取城市列表
	}
};
</script>

<style lang="scss" scoped>
.city_list {
	.seach_wraper {
		position: fixed;
		top: 0;
		width: 690rpx;
		background-color: #ffffff;
		padding: 24rpx 30rpx 48rpx 30rpx;
		z-index: 1000;
	}
	.city_location {
		margin-top: 152rpx;
		padding: 0 30rpx;
		.title {
			font-size: 24rpx;
			font-weight: 600;
			color: rgba(121, 132, 152, 1);
			padding: 28rpx 0;
		}
		.name {
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			border: 1rpx solid rgba(209, 215, 225, 1);
			border-radius: 4rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			.img {
				width: 28rpx;
				height: 32rpx;
				margin-right: 10rpx;
				display: inline-block;
				vertical-align: -4rpx;
			}
		}
	}
	.often {
		padding: 12rpx 30rpx 0 30rpx;
		.title {
			font-size: 24rpx;
			font-weight: 600;
			color: rgba(121, 132, 152, 1);
			padding: 28rpx 0;
		}
		.often_list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.often_item {
				width: 30%;
				height: 72rpx;
				line-height: 72rpx;
				margin-bottom: 20rpx;
				border: 1rpx solid rgba(209, 215, 225, 1);
				border-radius: 4rpx;
				font-size: 28rpx;
				text-align: center;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
	.list {
		border-top: 56rpx solid #f4f6f9;
		.list_item {
			width: 690rpx;
			margin: 0 auto;
			background-color: #ffffff;
			border-bottom: 1rpx solid #d1d7e1;
			height: 99rpx;
			line-height: 99rpx;
			.name {
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
				margin-right: 32rpx;
			}
			.province {
				font-size: 24rpx;
				font-weight: 300;
				color: rgba(153, 153, 153, 1);
			}
		}
	}
}
</style>
